<template>
  <div class="app-container">
    <el-form :inline="true" class="queryForm" ref="queryForm" v-show="showSearch">
      <FormItem v-for="(item,index) in fieldInfo" :itemInfo="item" :index="index" :key="index" itemType="query"
                @ItemValChange="ItemValChange"></FormItem>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!--右侧查询按钮-->
      <right-toolbar :showSearch.sync="showSearch"
                     stype="V1"
                     @handleQuery="handleQuery"
                     @resetQuery="resetQuery"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="tables" :height="table.tabHeight" border :data="tableData"
              @row-dblclick="dblclickRow">
      <el-table-column show-overflow-tooltip type="selection" width="55" align="center"/>
      <!--遍历需要显示的字段-->
      <el-table-column show-overflow-tooltip v-for="(item,index) in listShowColumnFilter" :key="index" :label="item.columnComment"
                       :min-width="item.columnWidth"
                       :align="item.columnAlign"
                       :prop="item.columnName">
        <template slot-scope="scope">
          <span>{{ translatorFormatter(scope.row, item) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="dblclickRow(scope.row)"
          >选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="table.total>0"
                :total="table.total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

  </div>
</template>

<script>
  import { TableMixins } from "@/views/youshuda/mixins/TableMixins";
  export default {
    name: "SearchModel",
    props: {
      model: {
        default: ''
      },
    },
    mixins: [TableMixins],
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        //API前缀
        prefixUrl: '',
        //表单设计Key
        formBuildKey: '',
        //组件描述
        componentDesc: '关联数据',
      };
    },
    created() {
      if(this.model!=''){
        this.prefixUrl=this.model;
        this.formBuildKey=this.model.substr(this.model.lastIndexOf("/")+1);
        /** 初始化字段信息 **/
        this.initField()
      }
    },
    methods: {
      /** 双击数据行 */
      dblclickRow(row) {
        this.$emit('ChooseSearchModelData',row);
      },
      // 重置数据表格的高度
      resetTableHeight() {
        this.$nextTick(() => {
          this.table.tabHeight = this.table._tabHeight
          if(this.showSearch){
            /**
             * 显示搜索区域时
             */
            this.table.tabHeight = this.table._tabHeight-this.$refs.queryForm.$el.offsetHeight
          }
          // 重新渲染表格
          this.$refs.tables.doLayout();
        })
      },
    },
    beforeMount() {
      /** 适配数据表格高度 **/
      this.table._tabHeight = this.appMain.height - 220
    }
  };
</script>
